<template>
  <view class="home" :style="{ paddingTop: statusBarHeight }">
    <image
      src="../../assets/images/icons/head-bg.png"
      mode="scaleToFill"
      class="bg"
    />
    <view
      class="sss"
      :style="{ height: statusBarHeight, opacity: opacity }"
    ></view>
    <view class="search flex flex-a-c">
      <view @click="onSearch" class="input flex flex-a">
        <image
          src="../../assets/images/icons/search.png"
          mode="scaleToFill"
          class="search-icon"
        />
        <text class="text fs-28">请输入关键词</text>
      </view>
      <image
        @click="toMessage"
        class="bell"
        src="../../assets/images/icons/message.png"
        style="width: 48rpx; height: 48rpx"
        mode="scaleToFill"
      />
    </view>
    <u-swiper
      @click="onClickSwiper"
      indicator
      circular
      keyName="picUrl"
      :list="list1"
    ></u-swiper>

    <view
      @click="toGuide(0)"
      v-if="dzoneList.length"
      class="for-new r-16 flex flex-bt"
      :style="{
        background: `linear-gradient(90deg, ${dzoneList[0].backgroundColor} 0%, ${dzoneList[0].backgroundColor}8a 100%)`,
      }"
    >
      <view class="flex flex-a">
        <view class="flex flex-a">
          <text class="fs-32 black bold">{{ dzoneList[0].title }}</text>
          <image style="width:32rpx;height: 32rpx;margin-left: 12rpx;" :src="dzoneList[0].identificationUrl"></image>
        </view>
        <text class="des fs-24 dark-text ellipsis" style="max-width: 200px"
          >/ {{ dzoneList[0].instructions }}</text
        >
      </view>
      <image class="f0" :src="dzoneList[0].picUrl"></image>
    </view>
    <view class="func flex">
      <view
        @click="toGuide(1)"
        v-if="dzoneList[1]"
        class="item r-16 flex flex-a flex-bt"
        :style="{
          background: `linear-gradient(90deg, ${dzoneList[1].backgroundColor} 0%, ${dzoneList[1].backgroundColor}8a 100%)`,
        }"
      >
        <view class="left">
          <view class="top flex flex-a">
            <text class="fs-32 black bold">{{ dzoneList[1].title }}</text>
            <image :src="dzoneList[1].identificationUrl"></image>
          </view>
          <text class="des fs-24 dark-text ellipsis">{{
            dzoneList[1].instructions
          }}</text>
        </view>
        <image :src="dzoneList[1].picUrl" class="right" />
      </view>
      <view
        @click="toGuide(2)"
        v-if="dzoneList[2]"
        class="item r-16 flex flex-a flex-bt"
        :style="{
          background: `linear-gradient(90deg, ${dzoneList[2].backgroundColor} 0%, ${dzoneList[2].backgroundColor}8a 100%)`,
        }"
      >
        <view class="left">
          <view class="top flex flex-a">
            <text class="fs-32 black bold">{{ dzoneList[2].title }}</text>
            <image :src="dzoneList[2].identificationUrl"></image>
          </view>
          <text class="des fs-24 ellipsis dark-text">{{
              dzoneList[2].instructions
            }}
          </text>
        </view>
        <image :src="dzoneList[2].picUrl" class="right" />
      </view>
    </view>
    <List :onBottom="bottom" :showKey="showKey" />
    <Protocol :show="showProtocal" @hide="showProtocal = false" />
    <!-- <Tabbar /> -->
  </view>
</template>

<script>
import List from "./components/List.vue";
import { statusBarHeight } from "../../assets/utils/config";
import Tabbar from "../../compennts/tabbar/index.vue";
import { getDZone, getBanner } from "../../api/home";
import Protocol from "./components/Protocol.vue";
export default {
  components: { List, Tabbar, Protocol },
  data() {
    return {
      statusBarHeight,
      opacity: 0,
      bottom: 0,
      list1: [],
      dzoneList: [],
      showProtocal: false,
      showKey:0
    };
  },

  onPageScroll({ scrollTop }) {
    let percent = scrollTop / 348;
    this.opacity = percent;
  },
  onReachBottom() {
    this.bottom++;
  },
  onShow(){
    this.showKey++
  },
  mounted() {
    // 判断是否弹出过协议
    this.checkProtocal();
    this.onGetDZone();
    this.onGetBanner();
  },
  watch: {},
  methods: {
    // 判断是否弹出过协议
    checkProtocal() {
      let p = uni.getSystemInfoSync().platform;
      if (uni.getSystemInfoSync().platform === "android") {
        let showed = uni.getStorageSync("hasProtocalShow");
        if (!showed) {
          this.showProtocal = true;
        }
      }
    },
    onGetDZone() {
      getDZone().then((res) => {
        let list = res.data || [];
        this.dzoneList = list;
      });
    },
    onGetBanner() {
      getBanner().then((res) => {
        this.list1 = res.data;
      });
    },
    onClickSwiper(e) {
      const { url, redirectType, vid } = this.list1[e];
      if (redirectType === 0) {
        return;
      }
      // 短剧
      if (redirectType == 1) {
        uni.navigateTo({
          url: `/pages/extend/detail/index?id=${vid}`,
        })
        return;
      }
      url && plus.runtime.openURL(url);
    },
    toMessage() {
      uni.navigateTo({
        url: "/pages/mine/message/index",
      });
    },
    toGuide(i) {
      const url = this.dzoneList[i].url;
      console.log('url:',url)
      url && plus.runtime.openURL(url);
    },
    onSearch() {
      uni.navigateTo({
        url: "/pages/index/search",
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.sss {
  position: fixed;
  background: #ffffff;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
  filter: blur(5);
}
.home {
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #93aafb 0%, #ffffff 496rpx);
  padding-left: 32rpx;
  padding-right: 32rpx;
  position: relative;
  z-index: 12;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    user-select: none;
    pointer-events: none;
  }
  .search {
    margin-bottom: 32rpx;
    // background: #ffffff;
    border-radius: 16rpx;
    height: 88rpx;
    .search-icon {
      width: 40rpx;
      height: 40rpx;
    }
    .input {
      height: 80rpx;
      background: #fff;
      border-radius: 16rpx;
      margin-right: 22rpx;
      padding: 24rpx;
      flex: 1;
      .text {
        color: rgba(31, 35, 41, 0.4);
        padding-left: 4rpx;
      }
      .bell {
        font-size: 40rpx;
        color: #070b1c;
      }
    }
  }
  .for-new {
    margin-top: 32rpx;
    padding: 14rpx 32rpx 14rpx 32rpx;
    height: 120rpx;
    align-items: center;
    // background: linear-gradient(92deg, #eaf6ff 0%, #f5fafe 100%);
    .des {
      margin-left: 16rpx;
    }
    image {
      width: 70rpx;
      height: 78rpx;
    }
  }
  .func {
    margin-top: 28rpx;
    .item {
      flex-shrink: 0 !important;
      flex: 1;
      background: linear-gradient(135deg, #fff5e3 0%, #fffcf6 100%);
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      height: 148rpx;
      &:nth-child(2) {
        margin-left: 22rpx;
        background: linear-gradient(135deg, #fff0f0 0%, #fff9f9 100%);
      }
      .left {
        .des {
          display: block;
          width: 168rpx;
          margin-top: 16rpx;
        }
        .top {
          image {
            width: 32rpx;
            height: 32rpx;
            margin-left: 12rpx;
            border-radius: 50%;
          }
        }
      }
      .right {
        width: 72rpx;
        height: 72rpx;
      }
    }
  }
}
</style>
